import { Canvas, Line, Triangle, Circle } from 'fabric' // browser

/**
 * 创建跑道
 * @param left 跑道中心x坐标
 * @param top 跑道中心y坐标
 * @param canvas 画布
 * @param runWay 跑道
 * @param state 状态(true,false)
 */
export const drawRunWay = (left, top, canvas, runWay, state) => {
  if (runWay) {
    const { circle1, line, circle2, line2 } = runWay
    circle1.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    line.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    line2.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    circle2.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    runWay = { circle1, line, line2, circle2 }
  } else {
    const circle1 = new fabric.Circle({
      radius: 19,
      strokeWidth: 3,
      startAngle: Math.PI * 0.5,
      endAngle: Math.PI * 1.5,
      left: left - 39, // left表示圆心的水平位置
      top: top - 19, // top表示圆心的垂直位置
      fill: 'rgb(27,27,31)'
    })
    const line = new fabric.Line([left - 20, top - 19, left + 20, top - 19], {
      strokeWidth: 3
    })
    const line2 = new fabric.Line([left - 20, top + 19, left + 20, top + 19], {
      strokeWidth: 3
    })
    const circle2 = new fabric.Circle({
      radius: 19,
      startAngle: Math.PI * 1.5,
      endAngle: Math.PI * 0.5,
      strokeWidth: 3,
      left: left - 1,
      top: top - 19,
      fill: 'rgb(27,27,31)'
    })
    circle1.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    line.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    line2.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    circle2.set({
      stroke: state ? 'rgb(8,255,66)' : 'white'
    })
    runWay = { circle1, line, line2, circle2 }
    canvas.add(circle1)
    canvas.add(line)
    canvas.add(line2)
    canvas.add(circle2)
  }
  return runWay
}

/**
 * 创建三角形
 * @param left 三角形中心x坐标
 * @param top 三角形中心y坐标
 * @param canvas 画布
 * @param direction 方向
 * @param triangle 三角形
 * @param state 状态(true,false)
 * @param size 大小(small,normal)
 */
export const drawTriangle = (left, top, canvas, direction, triangle, state, size) => {

  if (triangle) {
    canvas.remove(triangle)
  }
  const rotationAngles = {
    top: 0,
    right: Math.PI / 2,
    left: -Math.PI / 2
  }
  if (direction in rotationAngles) {
    triangle = new fabric.Triangle({
      left: size === 'normal' ? left - 11 : left - 9,
      top: size === 'normal' ? top - 10 : top - 5,
      width: size === 'normal' ? 22 : 18, // 设置三角形的宽度
      height: size === 'normal' ? 20 : 10, // 设置三角形的高度
      angle: rotationAngles[direction] * (180 / Math.PI), // Convert radians to degrees
      originX: 'center',
      originY: 'center'
    })
    if (state) {
      triangle.set({
        fill: 'rgb(8,255,66)'
      })
    } else {
      triangle.set({
        fill: 'black',
        stroke: 'white',
        strokeWidth: 2
      })
    }
    canvas.add(triangle)
    return triangle
  } else {
    console.error('Invalid direction:', direction)
    return null
  }
}

/**
 * 创建或设置圆
 * @param left 圆心x坐标
 * @param top 圆心y坐标
 * @param canvas 画布
 * @param color 颜色
 * @param circle 圆
 * @param state 状态(ON,OFF,BLANK)
 * @param direction 方向(horizontal,vertical)
 * @param size 大小(small,normal,little)
 */
export const drawCircle = (left, top, canvas, state, params, direction, size) => {
  // console.log(circle)
  let line = null
  let line2 = null
  let circle = null
  if (params) {
    canvas.remove(params.circle)
    params.line ? canvas.remove(params.line) : ''
    params.line2 ? canvas.remove(params.line2) : ''
  }
  const isSmall = size === 'small'
  const isLittle = size === 'little'
  const isOn = state === 'ON'
  const strokeColor = isOn ? 'rgb(8,255,66)' : 'white'
  const strokeWidth = 2
  // 创建圆形对象
  circle = new fabric.Circle({
    radius: isLittle ? 12 : isSmall ? 15 : 19,
    strokeWidth: 3,
    left: left - 20,
    top: top - 19,
    fill: '',
    stroke: state === 'ON' ? 'rgb(8,255,66)' : 'white'
  })

  // 根据状态和方向创建线条
  if (state !== 'BLANK') {
    if (direction === 'horizontal') {
      if (!isOn) {
        // 水平方向OFF状态画两条竖线
        line = new fabric.Line(
          [
            left - (isLittle ? 10.5 : isSmall ? 8.5 : 4.5),
            top - (isLittle ? 17 : 17),
            left - (isLittle ? 10.5 : isSmall ? 8.5 : 4.5),
            top + (isLittle ? 6 : isSmall ? 11 : 19)
          ],
          {
            stroke: strokeColor,
            strokeWidth
          }
        )
        line2 = new fabric.Line(
          [
            left + (isLittle ? -4 : isSmall ? 0 : 5),
            top - (isLittle ? 17 : 17),
            left + (isLittle ? -4 : isSmall ? 0 : 5),
            top + (isLittle ? 6 : isSmall ? 11 : 19)
          ],
          {
            stroke: strokeColor,
            strokeWidth
          }
        )
      }
    } else {
      // 垂直方向
      if (!isOn) {
        // 垂直方向OFF状态画两条横线
        line = new fabric.Line(
          [
            left - (isLittle ? 17 : 17),
            top - (isLittle ? 10 : isSmall ? 8.5 : 4.5),
            left + (isLittle ? 6 : isSmall ? 11 : 19),
            top - (isLittle ? 10 : isSmall ? 8.5 : 4.5)
          ],
          {
            stroke: strokeColor,
            strokeWidth
          }
        )
        line2 = new fabric.Line(
          [
            left - (isLittle ? 17 : 17),
            top + (isLittle ? -3.5 : isSmall ? 0 : 5),
            left + (isLittle ? 7 : isSmall ? 11 : 19),
            top + (isLittle ? -3.5 : isSmall ? 0 : 5)
          ],
          {
            stroke: strokeColor,
            strokeWidth
          }
        )
      }
    }
  }
  // 将对象添加到画布

  canvas.add(circle)
  if (line) canvas.add(line)
  if (line2) canvas.add(line2)
  return { circle, line, line2 }
}

/**
 * 画发动机引气管路路径
 * @param left 路径起始点x坐标
 * @param top 路径起始点y坐标
 * @param canvas 画布
 * @param path 路径
 * @param state 状态(true,false)
 * @param engine 发动机(1标识左发,2标识右发)
 */
export const drawEngineBleedPath = (left, top, canvas, path, state, engine) => {
  // 如果已有path，先移除旧的
  if (path) {
    canvas.remove(path)
  }

  const sign = engine === 1 ? 1 : -1
  // 创建新的path
  let newPath
  newPath = new fabric.Path(
    state
      ? `M ${left - sign * 42} ${top} 
   h ${sign * (55 + 42)} 
   q ${sign * 5} 0 ${sign * 5} -5
   v -135`
      : `M ${left} ${top} 
   h ${sign * 55} 
   q  ${sign * 5} 0 ${sign * 5} -5
   v -135`,
    {
      stroke: state ? 'rgb(8,255,66)' : 'white',
      strokeWidth: state ? 10 : 2,
      fill: ''
    }
  )

  canvas.add(newPath)
  return newPath // 返回新创建的path对象
}

/**
 * 画空调制冷系统路径
 * @param {*} left 路径起始点x坐标
 * @param {*} top 路径起始点y坐标
 * @param {*} canvas 画布
 * @param {*} path 路径
 * @param {*} state 状态(true,false)
 * @param {*} direction 方向(left,right)
 */
export const drawPackPath = (left, top, canvas, path, state) => {
  if (path) {
    canvas.remove(path)
  }

  // 创建新的path
  let newPath
  if (state) {
    newPath = new fabric.Path(
      `M ${left} ${top}
        v -102`,
      {
        stroke: 'rgb(8,255,66)',
        strokeWidth: 10,
        fill: ''
      }
    )
    canvas.add(newPath)
    return newPath
  } else {
    newPath = new fabric.Path(
      `M ${left} ${top}
        v -41
        M ${left} ${top - 41}
        v -14
        M ${left} ${top - 92}
        v -11`,
      {
        stroke: 'white',
        strokeWidth: 2,
        fill: ''
      }
    )
    canvas.add(newPath)
    return newPath
  }
}

/**
 * 画一条线
 * @param {*} left 线的起始点x坐标
 * @param {*} top 线的起始点y坐标
 * @param {*} length 线的长度
 * @param {*} canvas 画布
 * @param {*} line 线
 * @param {*} state 状态(true,false)
 */
export const drawLine = (left, top, length, canvas, line, state) => {
  //画一个从横坐标left，纵坐标top开始，长度是length的line
  if (line) {
    canvas.remove(line)
  }
  line = new fabric.Line([left, top, left + length, top], {
    stroke: state ? 'rgb(8,255,66)' : 'white',
    strokeWidth: state ? 10 : 2
  })
  canvas.add(line)
  return line
}

/**
 * 画隔离活门线路
 * @param {*} left 线的起始点x坐标
 * @param {*} top 线的起始点y坐标
 * @param {*} length 线的长度
 * @param {*} canvas 画布
 * @param {*} line 线
 * @param {*} state 状态(true,false)
 * @returns
 */
export const drawIslnLine = (left, top, length, canvas, line, state) => {
  console.log('line', line)

  if (line) {
    canvas.remove(line)
  }
  if (state) {
    line = new fabric.Line([left, top, left + length, top], {
      stroke: state ? 'rgb(8,255,66)' : 'white',
      strokeWidth: state ? 10 : 2
    })
    canvas.add(line)
    return line
  } else {
    line = new fabric.Line([left, top, left + length, top], {
      stroke: 'white',
      strokeWidth: 2,
      strokeDashArray: [42, 41, 59, 40, 60, 41, 28] // 4段等长虚线，每段实线80px，间隔80px
    })
    canvas.add(line)
    return line
  }
}

export const fabricDrawHorizontalLine = (left, top, length, canvas, line, state, direction) => {
  if (line) {
    line.set({
      stroke: state ? 'rgb(8,255,66)' : 'white',
      strokeWidth: state ? 10 : 2,
      x1: left,
      y1: top,
      x2: direction === 'left' ? left - length : left + length,
      y2: top
    })
    return line
  } else {
    line = new fabric.Line([left, top, direction === 'left' ? left - length : left + length, top], {
      stroke: state ? 'rgb(8,255,66)' : 'white',
      strokeWidth: state ? 10 : 2,
      fill: ''
    })
    canvas.add(line)
    return line
  }
}

/**
 * 画一条水平线
 * @param {*} left 线的起始点x坐标
 * @param {*} top 线的起始点y坐标
 * @param {*} length 线的长度
 * @param {*} canvas 画布
 * @param {*} line 线
 * @param {*} state 状态(true,false)
 * @param {*} direction 方向(left,right)
 * @returns
 */
export const drawHorizontalLine = (left, top, length, canvas, line, state, direction) => {
  if (line) {
    canvas.remove(line)
  }

  const adjustedTop = state ? top - 4 : top
  line = new fabric.Line(
    [
      left,
      !state ? top : adjustedTop,
      direction === 'left' ? left - length : left + length,
      !state ? top : adjustedTop
    ],
    {
      stroke: state ? 'rgb(8,255,66)' : 'white',
      strokeWidth: state ? 10 : 2,
      fill: ''
    }
  )
  canvas.add(line)
  return line
}

/**
 * 画一条垂直线
 * @param {*} left 线的起始点x坐标
 * @param {*} top 线的起始点y坐标
 * @param {*} length 线的长度
 * @param {*} canvas 画布
 * @param {*} line 线
 * @param {*} state 状态(true,false)
 * @param {*} direction 方向(upper,lower)
 * @returns
 */
export const drawVerticalLine = (left, top, length, canvas, line, state, direction) => {
  if (line) {
    canvas.remove(line)
  }

  // 计算线条的实际位置，考虑线宽的偏移
  const adjustedLeft = state ? left - 4 : left // 绿线宽度为10，白线宽度为2，调整4个像素

  if (state) {
    line = new fabric.Line(
      [adjustedLeft, top, adjustedLeft, direction === 'upper' ? top - length : top + length],
      {
        stroke: 'rgb(8,255,66)',
        strokeWidth: 10
      }
    )
  } else {
    line = new fabric.Line([left, top, left, direction === 'upper' ? top - length : top + length], {
      stroke: 'white',
      strokeWidth: 2,
      strokeDashArray: [36, 32, 60]
    })
  }

  canvas.add(line)
  return line
}

/**
 * 画L形状
 * @param {*} left 路径起始点x坐标
 * @param {*} top 路径起始点y坐标
 * @param {*} canvas 画布
 * @param {*} path 路径
 * @param {*} state 状态(true,false)
 * @param {*} direction 方向(left,right)
 */
export const drawLShape = (left, top, canvas, path, state, direction) => {
  if (path) {
    canvas.remove(path)
  }

  const sign = direction === 'left' ? 1 : -1

  if (state) {
    const newPath = new fabric.Path(
      `M ${left} ${top}
      h ${83 * sign} 
      q ${sign * 5} 0 ${sign * 5} ${-5}
      v -57`,
      {
        stroke: 'rgb(8,255,66)',
        strokeWidth: 10,
        fill: ''
      }
    )
    canvas.add(newPath)
    return newPath
  } else {
    const newPath = new fabric.Path(
      `M ${left} ${top}
      h ${83 * sign} 
      q ${sign * 5} 0 ${sign * 5} ${-5}
      v -9
      M ${left + 88 * sign} ${top - 54}
      v -7
      `,
      {
        stroke: 'white',
        strokeWidth: 2,
        fill: ''
      }
    )
    canvas.add(newPath)
    return newPath
  }
}
